<template>
    <div>
        <div id="box1-container">
            <div class="pro-box" v-for="i in qianduanList" :key="i">
                <div class="pro-box-top">
                    <div class="detail">
                        <p class="job-name" @click="toJobDetail(i.id)">{{i.name}}</p>
                        <p class="min-font">{{i.expObj.name}} | {{i.eduObj.name}}</p>
                    </div>
                    <div class="salary">{{i.min}}-{{i.max}}{{i.salaryUnit}}</div>
                </div>
                <div>
                    <div class="img-box">
                        <img :src="'https://res.mashangu.com/'+i.comDoc.img" alt="">
                    </div>
                    <div class="bottom-detail">
                        <p class="job-name"  @click="toCompanyDetail(i.comDoc.abbrName)">{{i.comDoc.abbrName}}</p>
                        <p class="min-font">
                            {{i.comDoc.tradeObj.name}} | {{i.comDoc.financeObj.name}} | {{i.addressObj.areaName}}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style>
#box1-container{
    margin: 0 349px;
}

.pro-box{
    width: 384px;
    height: 205px;
    background-color: white;
    padding: 28px 20px;
    box-sizing: border-box;
    margin: 8px 8px;
    display: inline-block;
}

.pro-box:hover{
    box-shadow: 5px 5px 5px #dfdfe0;
}

.pro-box .pro-box-top{
    height: 78px;
    border-bottom: 1px dashed #FFDCE3E8;
}

.job-name{
    font-size: 16px;
    color: #273B4E;
}

.job-name:hover{
    color: #193EFB;
}

.pro-box .min-font{
    color: #99A0AB;
    font-size: 14px;
    margin-top: 14px;
}

.pro-box .detail{
    display: inline-block;
    /* 解决div并排错位 */
    vertical-align:top;
}

.pro-box .salary{
    color: #FD895F;
    font-weight: bold;
    font-size: 16px;
    display: inline-block;
    /* 解决div并排错位 */
    vertical-align:top;
    float: right;
}

.pro-box .img-box{
    width: 56px;
    height: 56px;
    background-color: violet;
    display: inline-block;
    /* 解决div并排错位 */
    vertical-align:top;
    margin: 28px 16px 16px 5px;
}

.pro-box .img-box img{
    width: 56px;
}

.pro-box .bottom-detail{
    display: inline-block;
    /* 解决div并排错位 */
    vertical-align:top;
    margin-top: 28px;
}
</style>
<script>
import {getHotBox1List} from '../../api/hot-pro-box/hot-box1'
export default {
    created() {
        getHotBox1List(2).then(res =>{
            // console.log(res.data.data);
            this.qianduanList = res.data.data;
        })
    },
    data() {
        return {
            qianduanList:[],
            hotIndex:2
        }
    },
    methods: {
        toJobDetail(idStr){
            //指定跳转地址
            // this.$router.replace('/jobDetail');
            console.log(idStr)
            this.$router.push({
                path:'/jobDetail',
                query: {
                    id:idStr,
                    hotIndex: this.hotIndex
                } 
            })
        },
        toCompanyDetail(cname){
            this.$router.push({
                path:'/companyDetail',
                query: {
                    pages:'',
                    comName:cname,
                } 
            })
        }
    },
}
</script>